<template>
  <el-row>
    <el-col :span="9">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree
              :option="treeOption"
              :data="treeData"
              @node-click="nodeClick"
            />
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="15">
      <basic-container>
        <el-button-group>
          <el-button
            v-if="permission.city_add"
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="addChildren"
            >新增子级</el-button
          >
          <el-button
            v-if="permission.city_delete"
            type="primary"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete"
            >删除</el-button
          >
        </el-button-group>
      </basic-container>
      <basic-container>
        <avue-form
          ref="form"
          :option="cityOption"
          v-model="cityForm"
          @submit="handleSubmit"
        >
        </avue-form>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
import { getLazyTree, getDetail, add, remove } from "@/api/system/city";
import { mapGetters } from "vuex";
import { validatenull } from "@/util/validate";

export default {
  data() {
    return {
      topId: 0,
      treeId: 0,
      treeParentId: 0,
      treeData: [],
      treeOption: {
        nodeKey: "id",
        lazy: true,
        defaultExpandAll: true,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getLazyTree(parentId).then((res) => {
            resolve(
              res.data.data.map((item) => {
                return {
                  ...item,
                  leaf: !item.hasChildren,
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children",
        },
      },
      cityForm: {},
      cityOption: {
        labelWidth: 100,
        column: [
          {
            label: "父区划编号",
            prop: "parentId",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入父区划编号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "父区划名称",
            prop: "parentName",
            span: 24,
            disabled: true,
          },
          {
            label: "区划编号",
            prop: "regionCode",
            formslot: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入区划编号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "区划名称",
            prop: "regionName",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入区划名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "区划等级",
            prop: "regionLevel",
            type: "radio",
            dicUrl: "/api/blade-system/dictitem/dictionary?type=city_level",
            dataType: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请选择区划等级",
                trigger: "blur",
              },
            ],
          },
          {
            label: "区划排序",
            prop: "sort",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入区划排序",
                trigger: "blur",
              },
            ],
          },
          {
            label: "区划描述",
            prop: "regionDesc",
            type: "textarea",
            minRows: 3,
            span: 24,
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.city_add, false),
        viewBtn: this.vaildData(this.permission.city_view, false),
        delBtn: this.vaildData(this.permission.city_delete, false),
        editBtn: this.vaildData(this.permission.city_edit, false),
      };
    },
  },
  methods: {
    initTree() {
      this.treeData = [];
      getLazyTree(this.topId).then((res) => {
        this.treeData = res.data.data.map((item) => {
          return {
            ...item,
            leaf: !item.hasChildren,
          };
        });
      });
    },
    nodeClick(data) {
      const column = this.findObject(this.cityOption.column, "parentId");
      column.disabled = true;
      this.treeId = data.id;
      this.treeParentId = data.parentId;
      getDetail(this.treeId).then((res) => {
        this.cityForm = res.data.data;
      });
    },
    addChildren() {
      if (
        validatenull(this.cityForm.regionCode) ||
        validatenull(this.cityForm.regionName)
      ) {
        this.$message.warning("请先选择父区划");
        return;
      }
      this.cityForm.parentId = this.cityForm.id;
      this.cityForm.parentName = this.cityForm.regionName;
      this.cityForm.regionCode = "";
      this.cityForm.regionName = "";
      this.cityForm.regionDesc = "";
      this.cityForm.sort = this.cityForm.sort + 1;
      this.cityForm.regionLevel =
        this.cityForm.regionLevel === 5 ? 5 : this.cityForm.regionLevel + 1;

      delete this.cityForm.id;
      delete this.cityForm.updateTime;
      delete this.cityForm.updateUser;
      delete this.cityForm.createTime;
      delete this.cityForm.createUser;
      delete this.cityForm.status;
      delete this.cityForm.isDeleted;
    },
    handleSubmit(form, done, loading) {
      console.log(form);
      form.regionNumber = form.regionCode;
      form.abbreviation = form.regionName;
      add(form).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.initTree();
          this.$refs.form.resetForm();
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    handleDelete() {
      if (validatenull(this.cityForm.regionCode)) {
        this.$message.warning("请先选择一项区划");
        return;
      }
      this.$confirm(`确定将 [${this.cityForm.regionName}] 数据删除?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.treeId);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.initTree();
          this.$refs.form.resetForm();
        });
    },
  },
};
</script>

<style>
.box {
  height: 800px;
}

.el-scrollbar {
  height: 100%;
}

.box .el-scrollbar__wrap {
  overflow: scroll;
}
</style>
